/** @jsxImportSource @emotion/react */
import { jsx, } from "@emotion/react";
import * as React from "react";
import {CSSProperties,  useContext} from "react";
// import {useMMenuBarOcup, PanelEnlargeCtx} from "./MainMenuBar";
// import {useTheme} from "./Theme/Providers";
// import {Navbar} from "./Navbar";
// import {Toolbar} from "./Toolbar";
// import {IconChevronsLeft,  IconMoreVertical} from "./Icons";
// import {DdMenu, DdMenuItem, } from "./DropdownMenu";
// import {MenuItem} from "./Menu";
// import { Text } from "./Text";

import {
    useTheme,
    useMMenuBarOcup,
    Navbar,
    Toolbar,DdMenu,DdMenuItem,MenuItem,
    Text,PanelEnlargeCtx,
    IconMoreVertical, IconChevronsLeft
} from "customize-easy-ui-component";


interface TwoHalfRightPanelProps  {
    children: React.ReactNode;
    back: React.ReactNode;      //自带点按钮和击触发函数。
    title: string | React.ReactNode;
    /* 类似这样的:
        <React.Fragment>
            <DdMenuItem label="Ro"> </DdMenuItem>
            <DdMenu >  </DdMenu>
            <DdMenuItem label="奇" />
        </React.Fragment>
    * */
    menu?: React.ReactNode;
    //右半边 内容区Div 样式附加
    divStyle?: CSSProperties;
    //右半边 顶层的 样式附加
    topStyle?: CSSProperties;
    //非轮播台的初始页面比例： 0=右边满屏， 1：左边右边1比2，  2： 1比1， 3： 2比1，  4=左边满屏 。
    enlarge?: number;
}

/**右半边页面框架;   目的是配合<TwoHalfFrame/>共同构建框架页面。
 * 配合使用<TwoHalfFrame/> 这两个组件的共同父辈：可能是静态路由器分割开的，那么需要在路由器的父辈，也就是index.tsx比如这样的:
 * const container = document.getElementById('root');
 * const root = createRoot(container!);
 * root.render(      底下的顶级组件注入 <XxxContext.Provider比如底下这样的：
 const [enlarge, setEnlarge] = React.useState(null);        右半边页面状态是放大吗
 return (
 <PanelEnlargeCtx.Provider  value={{ enlarge, setEnlarge }}>
 {props.children}
 </PanelEnlargeCtx.Provider>
 )}
 注意：可能要设置<TwoHalfRightPanel  key={不同的id} />避免无法更新页面数据。
 * */
export const TwoHalfRightPanel: React.FunctionComponent<TwoHalfRightPanelProps> =(
    {
        back,
        menu,
        title,
        children,
        divStyle,
        topStyle,
        enlarge: desiredLarge,
        ...other
    }) => {
    const theme = useTheme();
    const contextPanel=useContext(PanelEnlargeCtx);
    if(contextPanel===null)     return null;
    const {enlarge, setEnlarge} =contextPanel;
    //工具条高度采用与底下的主菜单条的高度一样的设置
    const {carousel, barHeight,bottomCss } = useMMenuBarOcup(false);

    React.useEffect(() => {
        if(!carousel){
            //【奇特】不可以将enlarge也加入到依赖项：否则无法手动调节，像是依赖的死循环了。
            if(enlarge!==desiredLarge && desiredLarge!<4 && desiredLarge!>=0)
                setEnlarge(desiredLarge!);
        }
    }, [desiredLarge, carousel,enlarge, setEnlarge])

    //为了控制手机竖屏 轮播台的居中显示增加顶级div: "RightTop" 才能够适应控制。
    return (
        <div className="RightTop"
             css={{
                 display: 'flex',
                 minHeight: carousel? `calc(100vh - ${barHeight})` : '100%',
                 flexDirection: 'column',
                 justifyContent: carousel? 'space-evenly' : 'center',
                 ...topStyle,
             }}
        >
            <Navbar  position="sticky"
                     css={{
                         backgroundColor: "white",
                     }}
                     {...other}
            >
                <Toolbar
                    css={{
                        alignItems: "center",
                        display: "flex",
                        minHeight: `${barHeight}`,
                        //底层Toolbar的设置,要覆盖掉：
                        [theme.mediaQueries.lg]: {
                            minHeight: `${barHeight}`,
                        }
                    }}
                >
                    {back}

                    {typeof title === "string" ? (
                            <Text
                                css={{
                                    flex: 1,
                                    textAlign: "center",
                                    [theme.mediaQueries.md]: {
                                        textAlign: "left"
                                    }
                                }}
                                wrap={false}
                                variant="h5"
                                gutter={false}
                            >
                                {title}
                            </Text>
                        )
                        :
                        (title)
                    }
                    <div  css={{
                        display: 'inline-flex'
                    }}>
                        {  menu  }
                        {
                            !carousel && <DdMenu label="放大" tight={true}
                                                 icon={
                                                     <MenuItem variant="ghost"  component={"div"}>
                                                         <IconChevronsLeft />
                                                     </MenuItem>
                                                 }
                            >
                                <DdMenuItem label="左满屏"
                                            onClick={(e) => {setEnlarge(4);}} />
                                <DdMenuItem label="1比2"
                                            onClick={(e) => {setEnlarge(1);}} />
                                <DdMenuItem label="1比1"
                                            onClick={(e) => {setEnlarge(2);}} />
                                <DdMenuItem label="2比1"
                                            onClick={(e) => {setEnlarge(3);}} />
                                <DdMenuItem label="右满屏"
                                            onClick={(e) => {setEnlarge(0);}} />
                            </DdMenu>
                        }
                    </div>
                </Toolbar>
            </Navbar>

            <div className="HalfPaneRM"
                 css={[
                     {
                         display: 'flex',
                         alignItems:'center',
                         justifyContent:'center',
                         //minHeight: '40vh', 大屏幕下会导致和工具栏分离
                         minHeight: carousel? '40vh' : 'unset',
                         //paddingBottom:'3rem'
                     },
                     carousel? bottomCss : enlarge===4? undefined : bottomCss,
                 ]}
            >
                <div className="RightContent"
                     css={{
                         width:'100%',
                         background: 'white',
                         ...divStyle,
                     }}
                >
                    { children }
                </div>
            </div>

        </div>
    );
};


interface Props {
}
/**按钮定制的特殊菜单
 无法使用<VerticalMenu> {传递参数形式} </VerticalMenu>；菜单第一层不能正常地hover点亮和正常关闭。
 只能利用本简化按钮包裹，如下形式：
 <VerticalMenu>
 <DdMenuItem label="Ro">
 </VerticalMenu>  这样才能正常！ #无法拆开，必须在同一个组件之内装配按钮根目录/树杈项按钮菜单。
 * */
export const VerticalMenu: React.FC<Props> =
    (props) => {

        return (
            <DdMenu label="菜单" tight={true}
                    icon={
                        <MenuItem variant="ghost"  component={"div"}>
                            <IconMoreVertical />
                        </MenuItem>
                    }

                    {...props}
            />
        );

    };



/*旧版本 后退按钮：
{ React.cloneElement( back as React.ReactElement<any>,
    {
        children:  <IconButton  noBind  icon={<IconArrowLeft />}
                        variant="ghost"
                        label="后退"
                        size="md"
                        css={{
                            marginRight: theme.spaces.sm,
                            [theme.mediaQueries.md]: {
                                display: "none"
                            }
                        }}
        />
    }
    ) }
旧版的RightMiniScreenAlone 是可以上下左右都居中的，看见大背景的。
 */
